<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择地点</title>
</head>
<body>
<style>
    body {
        height: 100vh;
    }

    #app {
        height: 100%;
        width: 100%;
        padding: 0!important;
        display: flex;
        flex-direction: column;
    }


    .body {
        flex: 1;
    }

    #map-container {
        height: 100%;
        width: 100%;
    }


    .anchorBL{z-index:-1!important;opacity:0!important;height:0!important;}
    .top {
        padding: 12px 0px;
        position: relative;
    }


    .search-rel {
        position: absolute;
        z-index: 999999;
        background-color: #fff;
        left: 0;
        right: 0;
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .2);
    }

    .search-rel ul.search-rel-list {
        padding: 0;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .search-rel .search-rel-list li {
        list-style: none;
        padding: 6px 12px;
        cursor: pointer;
        color: #8c8c8c;
    }

    .search-rel .search-rel-list li + li {
        border-top: 1px dashed #efefef;
    }

    .search-rel .search-rel-list li:hover {
        background-color: #fafafa;
    }

    .search-rel .search-rel-list li b {
        padding-right: 12px;
        color: #000;
    }

    .search-rel .ant-pagination {
        margin-bottom: 8px;
    }
    .foot{
        padding: 12px;
        display: flex;
    }
    .foot .select-info{
        flex: 1;
    }
</style>
<div id="app" style="display: none">
    <div class="top">
        <div class="input-box" @click="relShow=relShow||(searchValue&&searchValue!=='')">
            <a-input type="text" id="map-select-search-input" placeholder="输入关键字查找地区" v-model:value="searchValue"
                     @press-enter="doSearch">
                <template #prefix>
                    <search-outlined type="user"></search-outlined>
                </template>
            </a-input>
        </div>
        <div class="search-rel" v-show="searchValue&&searchValue!==''&&relShow">
            <div v-if="list.length>0">
                <ul class="search-rel-list">
                    <li v-for="item in list" @click="selectRel(item)"><b>{{ item.title }}</b>{{ item.address }}</li>
                </ul>
                <a-pagination size="small" v-model:current="page" :page-size="pageSize" :total="count"
                              @change="pageChange"/>
            </div>
            <div v-else style="color: #d9d9d9;padding: 16px 24px">
                (未找到相关信息)
            </div>
        </div>
    </div>
    <div class="body">
        <div id="map-container"></div>
    </div>
    <div class="foot">
        <div class="select-info">{{selectAddr}}</div>
        <div class="check-btns">
            <a-button type="primary" :disabled="selectMk===null" @click="selected">确认选中</a-button>
        </div>
    </div>
</div>
<script src="/tp-script-vue-curd-static.php?vue3/vue.global.prod.js" charset="utf-8"></script>
<script src="/tp-script-vue-curd-static.php?ant-design-vue/antd.min.js" charset="utf-8"></script>
<script>
    function getQueryVariable(variable)
    {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i=0;i<vars.length;i++) {
            let pair = vars[i].split("=");
            if(pair[0].toString() === variable.toString()){return pair[1];}
        }
        return false;
    }
    //生成随机 GUID 数
    window.guid = function () {
        function S4() {
            return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)
        }

        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4())
    };
    window.map = null;
    window.placeSearch=null;
    window.geocode =null;
    const option = {
        setup(props, ctx) {
        },
        data() {
            return {
                searchValue: null,
                lastSearch: null,
                list: [],
                page: 1,
                pageSize: 10,
                count: 0,
                relShow: false,
                marker: null,
                selectMk:null,
                selectAddr:'',
            }
        },
        watch:{
            searchValue(){
                this.doSearch()
            },
        },
        mounted() {
            document.getElementById('app').style.display='flex'

            const initFunc='initializeBmap';
            window[initFunc]= ()=>{
                this.initMap()
            };

            let jsapi = document.createElement('script');
            jsapi.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=ZjBuQWgLwuirL24Tvt6EIVZvG9zQXjdM&callback='+initFunc;
            document.head.appendChild(jsapi);
            document.addEventListener('click', e => {
                if (e.target.closest('.search-rel') || e.target.matches('.search-rel') || e.target.closest('.input-box') || e.target.matches('.input-box')||(e.target.closest('li')&&e.target.closest('li').matches('.ant-pagination-item'))) {
                    return;
                }
                this.relShow = false;
            })
        },
        methods: {
            initMap() {
                let ct=getQueryVariable('center');
                let defCenter = ct&&ct!==','?new BMapGL.Point(ct.split(',')[0], ct.split(',')[1]):new BMapGL.Point(120.12, 30.19);
                //初始化地图对象
                window.map = new BMapGL.Map('map-container');
                //设置显示地图的中心点和级别
                window.map.centerAndZoom(defCenter, 9);  // 初始化地图,设置中心点坐标和地图级别
                window.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                window.map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式


                const setMark= (lngLat)=>{
                    if(!this.selectMk){
                        this.selectMk = new BMapGL.Marker(lngLat); // 创建点
                        window.map.addOverlay(this.selectMk);
                    }
                    this.selectMk.setPosition(lngLat)
                    window.map.centerAndZoom(lngLat, 18);
                    geocode.getLocation(lngLat, (rs)=>{
                        this.selectAddr=rs.address
                    })
                }
                window.geocode =  new BMapGL.Geocoder();
                window.map.addEventListener("click",e=>{
                    setMark(e.latlng)
                });

                Vue.nextTick(() => {
                    let that=this;
                    function initMark(){
                        let centerPoint=null;
                        if(window.mapSelect){
                            const lnglat=window.mapSelect.split(',')
                            centerPoint=new BMapGL.Point(lnglat[0],lnglat[1]);
                            setMark(centerPoint)
                        }else if(window.mapCenter){
                            centerPoint=new BMapGL.Point(window.mapCenter[0], window.mapCenter[1]);
                            window.map.centerAndZoom(centerPoint, 13);
                        }
                        that.mapInput(centerPoint);
                    }

                    if(window.mapSelect){
                        initMark();
                    }else{
                        window.initSelect=initMark;
                    }
                })
            },
            mapInput(center) {
                geocode.getLocation(center, (rs)=>{
                    //创建搜索对象
                    window.placeSearch = new BMapGL.LocalSearch(rs.addressComponents.city?rs.addressComponents.city:rs.addressComponents.province, {
                        pageCapacity: 10,	//每页显示的数量
                        onSearchComplete: result => {
                            this.count = result.getNumPois();
                            this.page = result.getPageIndex()+1;
                            let list=[]
                            for(let i=0;i<10;i++){
                                let val=result.getPoi(i);
                                if(val)list.push(val)
                            }
                            this.list = list;
                            this.relShow = true;


                        },//接收数据的回调函数
                    });
                })
            },
            doSearch() {
                if (this.searchValue.replace(/\n/g, '') === '') {
                    return;
                }
                window.placeSearch.search(this.searchValue);
            },
            pageChange(page) {
                window.placeSearch.gotoPage(page-1)
            },
            selectRel(rel){
                const lngLat=rel.point;
                if(!this.marker){
                    this.marker = new BMapGL.Marker(lngLat, {
                        icon: new BMapGL.Icon('https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', new BMapGL.Size(17, 30))
                    }); // 创建点
                    window.map.addOverlay(this.marker);
                }
                this.marker.setPosition(lngLat)
                window.map.centerAndZoom(lngLat,18);
                this.relShow=false;
            },

            selected(){
                if(this.selectMk===null){
                    return;
                }
                const lngLat=this.selectMk.getPosition();
                window.onMapSelected(lngLat.lng+','+lngLat.lat)
            }
        }
    };

    window.app = Vue.createApp(option)
    app.use(antd)
    app.component('SearchOutlined', {
        template: `<span role="img" aria-label="search" class="anticon anticon-search"><svg class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span>`
    })
    app.mount('#app')
</script>
</body>
</html>